<template>
  <div id="wrap">
    <h1>插槽slot案例</h1>
    <div class="group">
        <scu15 class="group3" :iszhendao="4"></scu15>
    </div>
    <div class="group">
        <scu16 class="group3"></scu16>
        <scu16 class="group3">
            <button @click="num++">{{ num }}</button>
            <scu15 class="group3" :iszhendao="2"></scu15>
        </scu16>
    </div>
    <div class="group">
        <scu17 class="group3">
            <template #header>
                <div>new header</div>
            </template>
            <template #default>
                <div>new main</div>
            </template>
            <template #footer>
                <div>new footer</div>
            </template>
        </scu17>
        <scu17>
            <template #[FatherName]>我是奶香的一把刀</template>
            <button @click="editDynamicSlotName">修改动态的具名插槽</button>
        </scu17>
    </div>
    <div class="group">
        <scu18 class="group3">
            <template #default="{ msg:smsg }">
                <div>new main {{ smsg }}</div>
            </template>
            <template #header="{ title, msg: sssmsg }">
                <div>new header{{ `${title}${sssmsg}` }}</div>
            </template>
            <template #footer>
                <div>new footer</div>
            </template>
        </scu18>
    </div>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'scu23',
}
</script>

<script lang='ts' setup>
import { ref } from 'vue'
import scu15 from "./component/scu15.vue";
import scu16 from "./component/scu16.vue";
import scu17 from "./component/scu17.vue";
import scu18 from "./component/scu18.vue";
const num=ref(0)
const FatherName=ref('')
const editDynamicSlotName=()=>{
    FatherName.value='dynamicSlotName'
}

</script>

<style scoped lang='scss'>
.group{
    border: 2px solid rgb(37,114,192);
    margin: 10px;
    padding: 10px;
}
.group3{
    border: 2px solid rgb(199,64,147);
    margin: 10px;
    padding: 10px;
}
</style>